
<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta charset=“utf-8”>
<title>assignment</title>
</head>
<style>
.boss
	{	float:left;

width: 200px;
height:200p
    
   
    
    line-height: 0;
    padding: 16px 18px;
	}
	:root {
   --pixel-size: 6;
}



.Character {
   width: calc(32px * var(--pixel-size));
   height: calc(32px * var(--pixel-size));
   overflow: hidden;
   position: relative;
   margin: 4em auto;
   color: yellow;
}

.Character_spritesheet {
   animation: moveSpritesheet 1s steps(4) infinite;
   width: calc(128px * var(--pixel-size));
   position: absolute;
   
}
.Character_shadow {
   position: absolute;
   width: calc(32px * var(--pixel-size));
   height: calc(32px * var(--pixel-size));
}

.pixelart {
   image-rendering: pixelated;
}

.face-right {
   top: calc(-32px * var(--pixel-size));
}
.face-up {
   top: calc(-64px * var(--pixel-size));
}
.face-left {
   top: calc(-96px * var(--pixel-size));
}


@keyframes moveSpritesheet {
   from {
      transform: translate3d(0px,0,0)
   }
   to {
      transform: translate3d(-100%,0,0)
   }
}
.is{background-color:red;
border-radius:40%;}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

$dark: #383838;
$bg: #7637A4;
$tennis-ball: #c9f364;
$white: #fcfcfc;
$diameter: 10rem;

body {
  height: 100vh;
  width: 100vw;
  background: $bg;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ball-container {
  width: $diameter;
  height: $diameter;
  position: absolute;
  animation: 
    updown .55s ease-out alternate-reverse infinite;
}

.ball {
  width: $diameter;
  height: $diameter;
  position: absolute;
  border-radius: 50%;
  background: $tennis-ball;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 0 2px 3px $white;
  animation: 
    rotate 3s linear infinite;
  
  &:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid $white;
    left: -67%;
    filter: blur(.5px);
  }
    
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 5px solid $white;
    right: -67%;
    filter: blur(.5px);
  }
}

.shadow {
  align-self: flex-end;
  width: 10rem;
  height: .3rem;
  border-radius: 25%;
  background: rgba($dark, .75);
  margin-bottom: 1rem;
  z-index: 0;
  animation: shadow .55s ease-out alternate-reverse infinite;
}

@keyframes updown {
  from {
    transform: translateY(95%)
  }
  to {
    transform: translateY(-90%)
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}

@keyframes shadow {
  from {
    transform: scale3d(.15, 1.25, 1)
  }
  to {
    transform: scale3d(1.25, .75, 1)
  }
}
 {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

$dark: #383838;
$bg: #7637A4;
$tennis-ball: #c9f364;
$white: #fcfcfc;
$diameter: 10rem;

body {
  height: 100vh;
  width: 100vw;
  background: $bg;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ball-container {
  width: $diameter;
  height: $diameter;
  position: absolute;
  animation: 
    updown .55s ease-out alternate-reverse infinite;
}

.ball {
  width: $diameter;
  height: $diameter;
  position: absolute;
  border-radius: 50%;
  background: $tennis-ball;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 0 2px 3px $white;
  animation: 
    rotate 3s linear infinite;
  
  &:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid $white;
    left: -67%;
    filter: blur(.5px);
  }
    
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 5px solid $white;
    right: -67%;
    filter: blur(.5px);
  }
}

.shadow {
  align-self: flex-end;
  width: 10rem;
  height: .3rem;
  border-radius: 25%;
  background: rgba($dark, .75);
  margin-bottom: 1rem;
  z-index: 0;
  animation: shadow .55s ease-out alternate-reverse infinite;
}

@keyframes updown {
  from {
    transform: translateY(95%)
  }
  to {
    transform: translateY(-90%)
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}

@keyframes shadow {
  from {
    transform: scale3d(.15, 1.25, 1)
  }
  to {
    transform: scale3d(1.25, .75, 1)
  }
}
}
.oval {
  width: 160px;
  height: 80px;
  border: black solid .5vmin;
  border-radius: 50%;
  position: relative;
  -webkit-animation:spin 4s ease-in-out infinite;
    -moz-animation:spin 4s ease-in-out infinite;
    animation:spin 4s ease-in-out infinite;
}

.oval:before {
  content: "";
  width: 160px;
  height: 80px;
  border: black solid .5vmin;
  border-radius: 50%;
  position: absolute;
  transform: rotate(45deg);
  -webkit-animation:spin 4s ease-in-out infinite;
    -moz-animation:spin 4s ease-in-out infinite;
    animation:spin 4s ease-in-out infinite;
}

.oval:after {
  content: "";
  width: 160px;
  height: 80px;
  border: black solid .5vmin;
  border-radius: 50%;
  position: absolute;
  transform: rotate(105deg);
  -webkit-animation:spin 4s ease-in-out infinite;
    -moz-animation:spin 4s ease-in-out infinite;
    animation:spin 4s ease-in-out infinite;
}


@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


.ovalll:before {
  content: "";
  width: 160px;
  height: 80px;
  border: yellow solid .5vmin;
  border-radius: 50%;
  position: absolute;
  transform: rotate(45deg);
  -webkit-animation:spin 5s ease-in-out infinite;
    -moz-animation:spin 5s ease-in-out infinite;
    animation:spin 5s ease-in-out infinite;
}

.ovalll:after {
  content: "";
  width: 160px;
  height: 80px;
  border: purple solid .5vmin;
  border-radius: 50%;
  position: absolute;
  transform: rotate(105deg);
  -webkit-animation:spin 5s ease-in-out infinite;
    -moz-animation:spin 5s ease-in-out infinite;
    animation:spin 5s ease-in-out infinite;
	
}
.ovall:before {
  content: "";
  width: 160px;
  height: 80px;
  border: blue solid .5vmin;
  border-radius: 50%;
  position: absolute;
  transform: rotate(45deg);
  -webkit-animation:spin 3s ease-in-out infinite;
    -moz-animation:spin 3s ease-in-out infinite;
    animation:spin 3s ease-in-out infinite;
}

.ovall:after {
  content: "";
  width: 160px;
  height: 80px;
  border: pink solid .5vmin;
  border-radius: 50%;
  position: absolute;
  transform: rotate(105deg);
  -webkit-animation:spin 3s ease-in-out infinite;
    -moz-animation:spin 3s ease-in-out infinite;
    animation:spin 3s ease-in-out infinite;
}
.ovallll:before {
  content: "";
  width: 160px;
  height: 80px;
  border: grey solid .5vmin;
  border-radius: 50%;
  position: absolute;
  transform: rotate(45deg);
  -webkit-animation:spin 6s ease-in-out infinite;
    -moz-animation:spin 6s ease-in-out infinite;
    animation:spin 6s ease-in-out infinite;
}

.ovallll:after {
  content: "";
  width: 160px;
  height: 80px;
  border: orange solid .5vmin;
  border-radius: 50%;
  position: absolute;
  transform: rotate(105deg);
  -webkit-animation:spin 6s ease-in-out infinite;
    -moz-animation:spin 6s ease-in-out infinite;
    animation:spin 6s ease-in-out infinite;
}
	

	

	
</style>
</div>

<body>
<div class="boss">
<span>
<p><b>original drawing</b></p>
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" class="svg-inline--fa fa-star fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 1700 700"><path fill="yellow" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg>
</g>
</svg>
</span>
<div>
<p><b>result<b></p>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="50" dy="50" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" class="svg-inline--fa fa-star fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -5 1700 700"><path fill="yellow" stroke="blue" stroke-width="15" filter="url(#f1)" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path> 
</svg>
</div>
</div>
<div class="boss">
<div>
<p><b>original drawing<b><p>

<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="grin-hearts" class="svg-inline--fa fa-grin-hearts fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zM90.4 183.6c6.7-17.6 26.7-26.7 44.9-21.9l7.1 1.9 2-7.1c5-18.1 22.8-30.9 41.5-27.9 21.4 3.4 34.4 24.2 28.8 44.5L195.3 243c-1.2 4.5-5.9 7.2-10.5 6l-70.2-18.2c-20.4-5.4-31.9-27-24.2-47.2zM248 432c-60.6 0-134.5-38.3-143.8-93.3-2-11.8 9.2-21.5 20.7-17.9C155.1 330.5 200 336 248 336s92.9-5.5 123.1-15.2c11.4-3.6 22.6 6.1 20.7 17.9-9.3 55-83.2 93.3-143.8 93.3zm133.4-201.3l-70.2 18.2c-4.5 1.2-9.2-1.5-10.5-6L281.3 173c-5.6-20.3 7.4-41.1 28.8-44.5 18.6-3 36.4 9.8 41.5 27.9l2 7.1 7.1-1.9c18.2-4.7 38.2 4.3 44.9 21.9 7.7 20.3-3.8 41.9-24.2 47.2z"></path></svg>
</div>
<div>
<p><b>result<b><P>
<div class="is">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="grin-hearts" class="svg-inline--fa fa-grin-hearts fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="yellow" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zM90.4 183.6c6.7-17.6 26.7-26.7 44.9-21.9l7.1 1.9 2-7.1c5-18.1 22.8-30.9 41.5-27.9 21.4 3.4 34.4 24.2 28.8 44.5L195.3 243c-1.2 4.5-5.9 7.2-10.5 6l-70.2-18.2c-20.4-5.4-31.9-27-24.2-47.2zM248 432c-60.6 0-134.5-38.3-143.8-93.3-2-11.8 9.2-21.5 20.7-17.9C155.1 330.5 200 336 248 336s92.9-5.5 123.1-15.2c11.4-3.6 22.6 6.1 20.7 17.9-9.3 55-83.2 93.3-143.8 93.3zm133.4-201.3l-70.2 18.2c-4.5 1.2-9.2-1.5-10.5-6L281.3 173c-5.6-20.3 7.4-41.1 28.8-44.5 18.6-3 36.4 9.8 41.5 27.9l2 7.1 7.1-1.9c18.2-4.7 38.2 4.3 44.9 21.9 7.7 20.3-3.8 41.9-24.2 47.2z"></path></svg>
</div>
</div>
</div>
<div class="boss">
<p><b>original drawing<b><p>
<div class="Character">
   
   <img class="Character_shadow pixelart" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/DemoRpgCharacterShadow.png" alt="Shadow" />
   
   <img class="Character_spritesheet pixelart face-down" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/DemoRpgCharacter.png" alt="Character" />
  
   </div>
   <p><b>result<p><b>
   <div class="Character">
   
   <img class="Character_shadow pixelart" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2406577362,3457866331&fm=26&gp=0.jpg" alt="Shadow" />
   
   <img class="Character_spritesheet pixelart face-down" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/DemoRpgCharacter.png" alt="Character" />
   
   
   
</div>
</div>
<div class="boss">
<div>
<p><b>原图像<b><p>
<div class="oval"></div>
</div>



</div>
<div class="boss">
<div>
<p><b>result<b><P>

<div class="ovalll"></div>






</div>
<div>
<div class="ovall"></div>
</div>
<div>
<div class="ovallll"></div>
</div>


</body>







</html>
